<template>
    <div>
        <Breadcrumb />
        <el-form
            :model="admins"
            :rules="rules"
            ref="admins"
            label-width="100px"
            class="demo-admins"
        >
            <el-form-item label="账户名" prop="account">
                <el-input v-model="admins.account"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="admins.realname"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="telephone">
                <el-input v-model="admins.telephone"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input v-model="admins.password" type="password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('admins')"
                    >立即创建</el-button
                >
                <el-button @click="resetForm('admins')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("admins");
import Breadcrumb from "../../commponents/common/Breadcrumb.vue";
export default {
    components: { Breadcrumb },
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,
            admins: {},
            rules: {
                account: [
                    {
                        required: true,
                        message: "请输入登录的账户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入登录密码",
                        trigger: "blur",
                    },
                ],
                realname: [
                    {
                        required: true,
                        message: "请输入用户的真实名字，用于登录后显示",
                        trigger: "blur",
                    },
                ],
                telephone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    // created() {
    //     console.log(this.$route);
    // },
    methods: {
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addAdmins();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 添加管理员
        async addAdmins() {
            const data = await this.addDataAsync(this.admins);
            if (data.code == 200) {
                this.open2();
            } else {
                this.open4();
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        ...mapActions(["addDataAsync"]),
        open2() {
            this.$message({
                message: "新增成功",
                type: "success",
            });
        },
        open4() {
            this.$message.error("新增失败");
        },
    },
};
</script>

<style scoped>
.el-form {
    margin-top: 20px;
    width: 500px;
}
</style>